<template>
  <div class="comment-wrapper">
    <template>
      <div class="order-list-wrapper">
        <div class="order-container" v-if="!hasComment">
          <van-panel>
            <div class="order-product">
              <div class="order-product-hd">
                <img :src="info.goods_picurl" alt="" />
              </div>
              <div class="order-product-bd">
                <h2>
                  {{ info.goods_name }}
                </h2>
                <div class="order-text">订单编号：{{ info.order_sn }}</div>
              </div>
            </div>
          </van-panel>

          <van-uploader
            v-model="fileList"
            :after-read="afterRead"
            :before-delete="handleDelete"
            accept="image/*"
            readonly
          />
          <van-field name="rate" label="综合评分">
            <template #input>
              <van-rate v-model="form.support" />
            </template>
          </van-field>
          <van-field
            v-model="form.content"
            rows="2"
            autosize
            label=""
            type="textarea"
            maxlength="140"
            placeholder="请输入留言"
            show-word-limit
          />
        </div>

        <div class="order-container" v-else>
          <van-panel>
            <div class="order-product">
              <div class="order-product-hd">
                <img :src="info.goods_picurl" alt="" />
              </div>
              <div class="order-product-bd">
                <h2>
                  {{ info.goods_name }}
                </h2>
                <div class="order-text">订单编号：{{ info.order_sn }}</div>
              </div>
            </div>
          </van-panel>
          <van-uploader
            v-model="commentList.picurl"
            preview-full-image
            :deletable="false"
            :show-upload="false"
          />

          <van-field name="rate" label="综合评分">
            <template #label>
              <span class="custom-label">
                <van-rate
                  v-model="commentList.support"
                  color="#E02E2E"
                  readonly
                  size="14px"
                />
              </span>
            </template>
          </van-field>

          <van-field
            disabled
            v-model="commentList.content"
            rows="2"
            autosize
            label=""
            type="textarea"
            maxlength="140"
            placeholder="请输入留言"
            show-word-limit
          />
        </div>
      </div>
    </template>

    <div class="bottom-pad" v-if="!hasComment">
      <van-button type="primary" block @click="handlePost">提交评价</van-button>
    </div>
    <!-- <van-empty description="暂无数据" v-if="!commentList.id" /> -->
  </div>
</template>

<script>
import {
  ucenterOrderDetail,
  ucenterOrderComment,
  viewPersonOrderComment,
} from "@/service/order";
import { uploadService } from "@/service/user";
export default {
  data() {
    return {
      message: "",
      rate: 4,
      fileList: [],
      picurl: [],
      info: {},
      hasComment: false,
      commentList: {},
      form: {
        commentid: "",
        order_id: "",
        order_sn: "",
        support: 0,
        content: "",
        picurl: [],
      },
    };
  },

  created() {
    this.queryInfo(this.$route.params.id);
    if (this.$route.query.is_evaluate == 2) {
      this.queryCommentInfo(this.$route.params.id);
      this.hasComment = true;
    } else {
      this.hasComment = false;
    }
  },

  components: {},

  computed: {},

  methods: {
    async queryInfo(id) {
      let result = await ucenterOrderDetail(id);
      if (result.status == 200) {
        this.info = result.data;
      } else {
        this.$toast(result.message);
      }
    },
    async queryCommentInfo(id) {
      let result = await viewPersonOrderComment(id);
      if (result.status == 200) {
        let commentList = result.data;
        let picurl = [];
        commentList.picurl.length &&
          commentList.picurl.map((item) => {
            let obj = {};
            obj.url = item;
            picurl.push(obj);
          });
        commentList.picurl = picurl;
        //  commentList.length && commentList.map(item => {
        //   if(item.picurl.length){
        //     console.log('pic lengthj')
        //     let picurl = []
        //       let obj = {}
        //       obj.url = itm
        //       picurl.push(obj)
        //     item.picurl = picurl
        //   }
        // })
        console.log(commentList, "commentList");
        this.commentList = commentList;
      } else {
        this.$toast(result.message);
      }
    },
    async handlePost() {
      let params = Object.assign({}, this.form);
      params.picurl = this.picurl.join(",");
      params.order_id = this.info.order_id;
      params.order_sn = this.info.order_sn;
      params.commentid = this.$route.query.goods_id;
      let res = await ucenterOrderComment(params);
      if (res.status == 200) {
        this.$toast("提交成功");
        this.$router.push({
          path: "/user/feed-status",
        });
      } else {
        this.$toast(res.message);
      }
    },
    afterRead(file) {
      file.status = "uploading";
      file.message = "上传中...";

      setTimeout(() => {
        file.status = "failed";
        file.message = "上传失败";
      }, 1000);
    },
    handleDelete(file, detail) {
      console.log(file, detail, "handleDelete");
      this.picurl.splice(detail.index, 1);
      this.fileList.splice(detail.index, 1);
      console.log(this.picurl);
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file); //file文件如下图
      var formData = new FormData(); //构造一个 FormData，把后台需要发送的参数添加
      formData.append("files", file.file); //接口需要传的参数

      // this.$upload("/single/single/upload", formData).then((res) => {
      //   //将formDate文件上传到阿里云服务器，会返回图片地址
      //   console.log(res, 111111);
      //   let str = res.response_data[0];
      //   this.uploadImages.push(str); //将图片地址存入一个数组中
      // });
      uploadService(formData).then((result) => {
        if (result.status == 200) {
          this.picurl.push(result.data.name);
        } else {
          this.$toast(result.message);
        }
      });
    },
  },
};
</script>
<style lang='less'>
.comment-wrapper {
  .van-uploader {
    padding: 0 15px;
  }
}
.order-container {
  .order-product {
    padding: 15px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    justify-content: space-around;
  }

  .order-product-hd {
    margin-right: 0.8em;
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center;
  }

  .order-product-hd img {
    width: 100%;
    height: 70px;
    vertical-align: top;
    border-radius: 5px;
  }

  .order-product-bd {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .van-uploader {
    padding-top: 10px;
  }
  .price {
    color: coral;
  }
  .order-product-bd h2 {
    font-weight: 400;
    font-size: 14px;
    height: 44px;
    line-height: 1.5;
    color: #333;
    width: auto;
    word-wrap: normal;
    word-wrap: break-word;
    word-break: break-all;
    padding-bottom: 0.4rem;
    .ellipsisLine(2);
  }
}
.comment-wrapper {
  .van-panel__header {
    height: 0;
    display: none;
  }
}
.bottom-pad {
  padding: 10px;
}
</style>